<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <script>
    /*
      查询字符串(queryString)
        + 潜规则: 按照字符串内存储的内容对字符串进行了一系列的划分
          => 普通字符串: 'jhsagdvhjkasgvfdhj'
          => 数字字符串: '798798654651323265987'
          => html 格式字符串: '<div></div>'
          => 查询字符串: 'key=value&key2=value2'
            -> 意义: 用于前后端交互的
    */

    /*
      自己封装一个方法, 把查询字符串转换成 对象数据类型
      自己封装一个方法, 把对象转换成 查询字符串格式
    */

    /*
      把查询字符串转换成对象数据类型
    */
    // function parseQueryString(str) {
    //   // str 就是要转换的查询字符串
    //   // 1. 准备一个空对象
    //   var obj = {}

    //   // 2. 对 str 进行操作, 向 对象内添加 内容
    //   // 问题1: 你要向对象内存放几个成员 ? & 分开几段就是几个
    //   // 使用 & 分隔字符串进行遍历, 随着遍历, 每次添加一个
    //   str.split('&').forEach(function (item) {
    //     // 问题2: 向对象内添加的时候 ? key 是什么 ? value 是什么 ?
    //     // key 就是等于号左边, value 就是等于号右边
    //     // 再次使用 等于号 分隔每一个 item
    //     var tmp = item.split('=')
    //     console.log(tmp)
    //     // 向对象内添加
    //     obj[ tmp[0] ] = tmp[1]
    //   })


    //   // 3. 把对象返回
    //   return obj
    // }

    // 将来使用的时候
    // var res = parseQueryString('username=admin&password=123456&nickname=前端小灰狼&gender=男')
    // console.log(res)


    /*
      把 查询字符串转换成 对象数据类型
    */

    function queryStringify(obj) {
      // obj 就是要转换成查询字符串的 对象数据类型

      // 1. 准备一个空字符串
      var str = ''

      // 2. 操作 obj 向字符串上添加内容
      // 问题1: 你需要向字符串上拼接几段内容 ? 对象内有多少个成员就是多少段
      // 遍历对象
      for (var k in obj) {
        // 问题2: 你添加的时候, 保持查询字符串格式 ?
        // key 是什么, 就是 k 变量
        // value 是什么, 就是 obj[k]
        str += `${ k }=${ obj[k] }&`
      }

      // 3. 返回这个字符串
      return str.slice(0, -1)
    }

    // 将来使用的时候
    var qs = queryStringify({username: 'admin', password: '123456', nickname: '前端小灰狼', gender: '男'})
    console.log(qs)
  </script>
</body>
</html>
